<template>
  <div
    class="classfication-module-wrapper"
    v-if="classfication_datas && classfication_datas.length > 0"
  >
    <classfication-swiper
      v-for="item in classfication_datas"
      :key="item.key"
      :key_name="item.key"
      :classfication_list="item.datas"
      @handleClickClassfication="handleClickClassfication"
    ></classfication-swiper>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import ClassficationSwiper from "../../components/ClassficationSwiper";
export default {
  name: "ClassficationModule",
  components: {
    ClassficationSwiper
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      classfication_datas: state => {
        return state.classfication.classfication_datas;
      }
    })
  },
  created() {
    this.getClassficationDatas();
  },
  methods: {
    ...mapMutations({
      updateParamsValue: "update_params_value"
    }),
    ...mapActions({
      getClassficationDatas: "classfication/getClassficationDatas"
    }),
    handleClickClassfication(key, value) {
      this.updateParamsValue({ key, value });
    }
  }
};
</script>

<style scoped>
.classfication-module-wrapper {
  margin: 0 10px;

  box-sizing: border-box;
  width: 355px;

  background: white;
}
</style>
